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