快速开始

安装

npm install vue-snake-ui -S

快速开始

import Vue from 'vue'
import Snake from 'vue-snake-ui'
Vue.use(Snake)

Basic

img

• 类型：component
• 用法：

<SNImg src="https://cn.vuejs.org/images/logo.png" class="img"></SNImg>

• arguments：

-说明-：
同一父组件下的 SNImg 点击可以查看详情，左右滑动可以查看兄弟图片组件详情

button

• 类型：component
• 用法：

<SNButton type="success" size="large" text="成功"></SNButton>

• arguments：

Form

buttonTab

• 类型：component
• 用法：

<SNButtonTab v-model="btnTab">
    <SNButtonTabItem>文章</SNButtonTabItem>
    <SNButtonTabItem>商品</SNButtonTabItem>
    <SNButtonTabItem>照片</SNButtonTabItem>
</SNButtonTab>

export default {
    data(){
        return{
            btnTab:0
        }
    }
}

-说明-：
v-model需要接受一个Number类型的变量。为buttonTab选中的index。

switch

• 类型：component
• 用法：

<SNSwitch v-model="snswitch"></SNSwitch>

export default {
    data(){
        return{
            snswitch:false
        }
    }
}

• arguments：

-说明-：
v-model需要接受一个boolean类型的变量。true为选中状态，false为未选中状态。

radio

• 类型：component
• 用法：

<SNRadio :list="checkBoxList" v-model="radioResult" str="name" keys="id"></SNRadio>

export default {
    data(){
        return{
            checkBoxList: [
               {name: "示例1", id: "1", checked: false, disabled: false},
               {name: "示例2", id: "2", checked: true, disabled: false},
               {name: "示例3", id: "3", checked: false, disabled: false}
            ]
        }
    }
}

• arguments：

-说明-：
v-model为选中项的逻辑值，默认为id，如果有需要更改请更改组件调用时的参数 ‘keys’。

checkBox

• 类型：component
• 用法：

<SNCheckBox :list="checkBoxList" v-model="result" str="name" keys="id"></SNCheckBox>

export default {
    data(){
        return{
            checkBoxList: [
               {name: "示例1", id: "1", checked: false, disabled: false},
               {name: "示例2", id: "2", checked: true, disabled: false},
               {name: "示例3", id: "3", checked: false, disabled: false}
            ]
        }
    }
}

• arguments：

-说明-：
v-model为选中项的逻辑值，默认为id，如果有需要更改请更改组件调用时的参数 ‘keys’。

datePicker

• 类型：component
• 用法：

  <SNDatePicker placeholder="请选择日期" format="yyyy-MM-dd" v-model="datePickerStr"></SNDatePicker>

export default {
    data(){
        return{
            datePickerStr:''
        }
    }
}

• arguments：

-说明-：
v-model目前是单向数据流，选择时间完毕之后会按照 format 的格式传出字符串。

Notice

toast

• 类型：Function

• 用法：

  • 基础：

    this.SNToast('这是一条toast');

  • success：

    this.SNToast.success(); this.SNToast.success('成功');

  • error：

    this.SNToast.error(); this.SNToast.error('失败');

  • loading-toast：

    this.SNToast.loading.show();

    loading图标最长10s消失，如果想消失请调用

    this.SNToast.loading.hide();

  • other：

    this.SNToast({ ... msg:'已完成'， ... });

• arguments：

alert

• 类型：Function
• 用法：

  this.SNAlert('这是一条alert');

以上为简单调用，完整api如下

this.SNAlert(
    ...
     msg:'我来组成头部',
    ...
)

• arguments：

actionSheet

• 类型：Function

• 用法：

  this.SNActionSheet({ title: '我来组成头部', btnList: arr, success: (num) => { this.SNToast('我点击按钮' + num); }, cancel: () => { this.SNToast('我点击返回'); }, key: 'key', value: 'value' });

• arguments：

Qrcode

Qrcode

• 类型：component
• 用法：

<SNQrcode v-model="qrcode"  :size="size" :colorDark="colorDark" :colorLight="colorLight"></SNQrcode>

• arguments：

-说明-：
v-model为二维码的值