❤
npm
Sign UpSign In

vue-hy

1.4.9 • Public • Published

GITHUB地址| 插件地址

pluginunit NPM all downloads NPM downloads NPM downloads

[试用演示]待续。。。

自己练手学习使用

如何使用？

npm install vue-hy
 
import hy from "vue-hy"
 
Vue.use(hy);

hy-input

<hy-input></hy-input>
Input Attributes
参数 说明 类型 可选值 默认值
v-model 绑定值 String/Number - -
type 类型 String 和原生一样 默认text
maxlength 原生属性，最大输入长度 Boolean - -
disabled 禁用 number true,false false
resize 控制是否能被用户缩放 String none, both, horizontal, vertical -
placeholder 输入框占位文本 String - -
autofocus 原生属性，自动获取焦点 Boolean true,false false
edit 修改input样式高宽，记得加上class不然input会变形 String - -
iconEnd 右边icon,默认icon详情请看icon例子 String - -
iconFrist 左边icon,默认icon详情请看icon例子 String - -
Input Slots
name 说明
frist 输入框头部内容，除了textarea均有效
end 输入框尾部内容，除了textarea均有效
Input Events 和原生一样
事件名字 说明 回调参数
blur 在 Input 失去焦点时触发 (event: Event)
change 在 Input 值改变时触发 (event: Event)
input 在 Input 值改变时触发 (event: Event)
focus 在 Input 获得焦点时触发 (event: Event)

hy-mask

<hy-mask  v-model="maskShow"><div>内容</div></hy-mask>
mask Attributes
参数 说明 类型 可选值 默认值
maskWidth 宽度 Number - 默认屏幕90%
maskHeight 高度 Number 默认屏幕60%
v-model 控制显示隐藏 Boolean - false
disabled 禁用背景点击关闭 Boolean true,false false

hy-card

<hy-card>
            <div slot="head">
                <span>6666</span>
            </div>
            <div>66666666666666</div>
            <div>66666666666666</div>
            <div>66666666666666</div>
            <div>66666666666666</div>
            <div>66666666666666</div>
            <div>66666666666666</div>
        </hy-card>
card Attributes
参数 说明 类型 可选值 默认值
slot 头部部分 String head -

hy-popup

<hy-popup v-model="show"><div>555</div> </hy-popup>
card Attributes
参数 说明 类型 可选值 默认值
v-model: 控制显示隐藏 Boolean true,false false
direction 方向 String top,bottom,left,right top
popupWidth 宽度,方向top,bottom失效自动占满 Number - 50%or100%
popupHeight 高度,方向left,right失效自动占满 Number - 50%or100%
disabled 禁用背景点击关闭 Boolean true,false false

hy-switch

<hy-switch v-model="sthGiveChild"></hy-switch>
card Attributes
参数 说明 类型 可选值 默认值
v-model 控制显示隐藏 Number 1,0 0
activeColor 激活颜色 String - rgb(19, 206, 102)
closeColor 没激活颜色 String - #dcdfe6
height 高度，如果高宽比例没有1：2就会自动根据高度*2=宽度；如果没有标明宽度的话，宽=高*2 String - 20
width 宽度,如果高度没设置就是宽的一半 String - 40
defaultPrevent true的时候高宽不会自动比例1:2，会根据你设定的高宽来 Boolean - false

hy-row

<hy-row></hy-row>
row Attributes
参数 说明 类型 可选值 默认值
type 是否flex布局 String flex -
justify flex 布局下的水平排列方式 String start/end/center/space-around/space-between -
align flex 布局下的垂直排列方式 top,bottom,middle -

hy-col

<hy-col col='11'></hy-col>
col Attributes
参数 说明 类型 可选值 默认值
col 栅格占据的列数效 Number 24
offset 栅格左侧的间隔格数 Number - -
pull 栅格向左移动格数 Number - -
push 栅格向右移动格数 Number - -
xs Number - -
sm ≥768px 响应式栅格数或者栅格属性对象 Number - -
md ≥992px 响应式栅格数或者栅格属性对象 Number - -
lg ≥1200px 响应式栅格数或者栅格属性对象 Number - -
xl ≥1920px 响应式栅格数或者栅格属性对象 Number - -
col 自带样式class
参数 说明 类型 可选值 默认值
hy-xs-none 当视口在 xs 尺寸时隐藏 - - -
hy-sm-none 当视口在 sm 尺寸时隐藏 - - -
hy-xs-none 当视口在 xs 尺寸时隐藏 - - -
hy-sm-follow 当视口在 sm 及以下尺寸时隐藏 - - -
hy-xs-up 当视口在 sm 及以上尺寸时隐藏 - - -
hy-md-none 当视口在 md 尺寸时隐藏 - - -
hy-md-follow 当视口在 md 及以下尺寸时隐藏 - - -
hy-md-up 当视口在 md 及以上尺寸时隐藏 - - -
hy-lg-none 当视口在 lg 尺寸时隐藏 - - -
hy-lg-follow 当视口在 lg 及以下尺寸时隐藏 - - -
hy-lg-up 当视口在 lg 及以上尺寸时隐藏 - - -
hy-xl-none 当视口在 xl 尺寸时隐藏 - - -
待续、、、、

Readme

Keywords

none

Package Sidebar

Install

npm i vue-hy

Repository

github.com/443484208/hy-Ui

Homepage

github.com/443484208/hy-Ui#readme

Weekly Downloads

2

Version

1.4.9

License

ISC

Unpacked Size

1.37 MB

Total Files

114

Last publish

Collaborators

  • 443484208qq
Try on RunKit
Report malware