应用平台

# 组件cap4-text

# 引入

import Cap4Text from 'cap4-pc-ui/lib/cap4-text';
import 'cap4-pc-ui/lib/cap4-text/css/cap4-text.css';

# 依赖

  • 图标依赖于 cap4字体库

# 基础用法

/**/

export default {
data() {
return {
value: '',
value1: '',
value2: '',
leftSpan: '文本',
leftSpan1: '气温',
leftSpanWidth: 50,
rightSpan: '℃',
disabled: true,
inputBgColor: '#f3f6fa',
type: 'number'
};
},
methods: {
validate(str, rules) {
if (str < -50 || str > 50 ) {
return '气温值应该在-50℃到50℃之间';
}
}
}
};
/**/::: demo

<template>
    <div class="demo-block">
        <cap4-text
            v-model="value"
            :leftSpan="leftSpan"
            :leftSpanWidth="leftSpanWidth"
        ></cap4-text>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            leftSpan: '选择',
            leftSpanWidth: 50
        };
    }
};
</script>

:::

# 不可输入状态

::: demo

<template>
    <div class="demo-block">
        <cap4-text
            v-model="value"
            :leftSpan="leftSpan"
            :leftSpanWidth="leftSpanWidth"
            :disabled="disabled"
            :inputBgColor="inputBgColor"
        ></cap4-text>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            leftSpan: '选择',
            leftSpanWidth: 50,
            disabled: true,
            inputBgColor: '#f3f6fa'
        };
    }
};
</script>

:::

# 带验证提示

::: demo

<template>
    <div class="demo-block">
        <cap4-text
            v-model="value"
            :leftSpan="leftSpan"
            :rightSpan="rightSpan"
            :leftSpanWidth="leftSpanWidth"
            :type="type"
            :validate="validate"
        ></cap4-text>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            leftSpan: '气温',
            leftSpanWidth: 50,
            rightSpan: '℃',
            type: 'number'
        };
    },
    methods: {
        validate(str, rules) {
            if (str < -50 ||   str > 50 ) {
                return '气温值应该在-50℃到50℃之间';
            }
        }
    }
};
</script>

:::

# Attributes

参数 说明 类型 可选值 默认值
value 值 (必填)) [String, Number] — —
leftSpan 左侧文本 (选填)) String — —
leftSpanWidth 左侧文本宽度 (选填)) [String, Number] — 100
rightSpan 右边侧文本 (选填)) String — —
rightSpanWidth 右侧文本宽度 (选填)) [String, Number] — 100
width 文本框高度 (选填)) [String, Number] — 200
height 文本框高度 (选填)) [String, Number] — 30
disabled 不可输入状态 (选填)) Boolean — false
type 类型 (选填)) String — 'text'
validate 验证 (选填)) Function — —
validateWidth 验证文本宽度 (选填)) [Number, String] — —
rules 规则 (选填)) Array — —
inputBgColor 文本框背景色 (选填)) String — —
hideLeftColon 隐藏左文本冒号 (选填)) Boolean — false
编撰人：yinyanting

快速跳转

← （14) 树组件 →