pcy-ui

安装

npm install pcy-ui-1999;

使用

main.js

import pcyUi from "pcy-ui-1999" //引入包
import "pcy-ui-1999/pcy-ui.css" //引入样式
Vue.use(pcyUi)//使用

Pcy-button

<pcy-button @click="xxx" size="mini" type="sucess">默认按钮</pcy-button>

button Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :-------- | --------------- | ------- | -------------------------------------------------- | ------ | | size | 按钮大小 | string | medium / small / mini | ----- | | type | 类型 | string | text / primary / success / warning / info / danger | ----- | | icon | 图标 | string | 我icon引入的可以用 | ------ | | disabled | 是否禁用 | Boolean | —————— | false | | round | 是否圆角 | Boolean | —————— | false | | circle | 是否圆 | Boolean | —————— | false | | loading | 是否显示loading | Boolean | —————— | false | | autofocus | 是否自动聚焦 | Boolean | —————— | false | | plain | 是否缕空 | string | —————— | false |

//还增加了 水波纹效果 防抖/节流 划过特殊样式 不过没有融入组件内

Pcy-input

<pcy-input 
  v-model="input" 
  placeholder="请输入内容" 
  @focus="handle_focus" 
  @blur="handle_blur"
  @input="handle_input"
  @change="handle_change"、
  type="text/textarea"
	clearable  //是否可清除
  disabled	//是都可选
  show-password	//是否展示密码框框
	suffix-icon="xxx"	//后置icon  属性的方式 也可以通过插槽的形式
	prefix-icon="xxx"	//前置icon
	autosize //text == textarea 的时候 
  size="mini" //大小
	show-word-limit //是否显示长度显示
	maxlength="30"//最大长度 配合showwordlimit一起使用
></pcy-input>

input Attributes

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | --------------- | ------------------------------------------------------ | ---------------- | --------------------- | ------ | | type | input类型 | String | text / textarea | Text | | size | input框大小 type==textarea不生效 | String | medium / small / mini | — | | disabled | 是否禁用 | Boolean | ————— | false | | clearable | 是否可清楚 | Boolean | ————— | false | | show-pass-word | 是否显示密码框 | Boolean | ————— | false | | suffixIcon | 后置icon | string | 在icon库里的可用 | false | | prefixicon | 前置icon | String | 在icon库里的可用 | false | | autosize | textarea高度自适应 对象如： { minRows: 2, maxRows: 6 } | Boolean / object | —————— | — | | show-word-limit | 显示长度显示 | Boolean | —————— | false | | maxlength | 最大长度 搭配show-word-limit 原生属性 | String | —————— | false | | value/v-mode | input的绑定值 | string/number | —— | — | | placeholder | 默认提示 | string | —— | — | | autofocus | 原生属性 自动获取焦点 | Boolean | —— | false |

input slots

| name | 说明 | | ------- | ----------------------------- | | prefix | 前置icon | | suffix | 后置icon | | prepend | 前置元素 组合input的时候 使用 | | append | 后置元素 组合input的时候 使用 |

input event

| 事件名称 | 说明 | 回调 | | -------- | ---------------------------------------------- | --------------- | | input | 输入框发现变化时 | (event: Event) | | change | 输入框失去焦点 且发生变化 | (event: Event) | | focus | 获取焦点 | (value: string) | | blur | 失去焦点 | (value: string) | | clear | 当属性clearable为true时 点击清除按钮触发的事件 | —— |