1.0.6 • Published 5 years ago
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时 点击清除按钮触发的事件 | —— |