ctj-ui v1.0.4

ctj-ui

#开发指南

npm 安装

推荐使用 npm 的方式安装 npm i ctj-ui

使用

推荐在 main.js 中全局引用

import CtjUI from 'ctj-ui'; // 引用组件
import 'ctj-ui/ctj-ui.css'; // 添加样式
Vue.use(CtjUI);

文档说明

https://www.yuque.com/luqh/fbc2mq/qizr2q

组件

InputNumber 金额数据格式化编辑显示组件

适用数值金额的格式化显示，可以设置前缀和单位及百分比显示

<template>
  <div >
    <CtjInputNumber v-model="value" :precision="2" :prefix="'￥'" :suffix="'元'"></CtjInputNumber>
  </div>
</template>
export default {
  data() {
    return {
      value: '1234.56'
    };
  }
};
</script>

• Attributes 属性

   * CtjInputNumber
   * @member props
   * @property {number|string} [value] 原始值
   * @property {number} [precision=0] 精度，保留几位小数
   * @property {string} [separator=,] 分隔值的符号，默认值为‘,’（英文逗号）
   * @property {string} [prefix] 前缀内容
   * @property {string} [suffix] 后缀内容
   * @property {boolean} [percentage] 按百分比计算显示, 如value=0.2, 显示为 20%

group 分组组件

页面分组

<CtjGroup :name="'基本信息'" :tips="'这里分组为'"></CtjGroup>

• Attributes 属性

  /**
   * ctj-group属性参数
   * @property {string} [name] 分组名称
   * @property {string} [tips] 补充说明，默认值空
   */

tag-select 按钮选择

支持单选、多选、全选设置

<template>
    <CtjTagSelect :options="options" :selected.sync="checkedList" :label="''" @change="handleChange" :allLabel="allLabel"> </CtjTagSelect>
</template>
<script>
export default {
  data() {
    return {
      allLabel: '全选',
      options: [
        { label: '1月', value: '2022-01' },
        { label: '3月', value: '2022-03' }
      ],
      checkedList: []
    };
  },
  methods: {
    handleChange(data) {
      console.log('log内容', data);
    }
  }
};
</script>

• Attributes 属性

  /**
   * ctj-tag-select属性参数
   * @property {string} [allLabel] 全选，默认不显示
   * @property {Array} [options] 显示数据,{label,value}
   * @property {Number}[isRadio] 是否单选，默认多选
   */

• Events