sina-mobile-components v0.2.9

安装

npm install sina-mobile-components

使用

使用的时候

• 如果想全部引入

  • import sinaMobileComponent from "sina-mobile-components";
  • Vue.use(sinaMobileComponent)

• 如果想要单独引入(sTitle,sButton,sSearch,sNotify)

  • import {sTitle,sButton,} from "sina-mobile-components";
  • Vue.use(sTitle).use(sButton)

• 引入样式

  • import 'sina-mobile-components/lib/sina-test.css';

• 组件使用了vant部分组件，使用时需要引入vant

  • search使用了vant-search

• 使用rem单位

  • import 'sina-mobile-components/rem.js';

组件

sTitle

• @params(Boolean) title

  • 标题

• 左右两边各有一个插槽slot='left,right'

#demo

     <sTitle title='123'>
        <template v-slot:left>
            <img
                src="https://img.yzcdn.cn/vant/logo.png"
                alt=""
                @click="callback"
            >
        </template>
        <template v-slot:right>
            <img
                src="https://img.yzcdn.cn/vant/logo.png"
                alt=""
                @click="callback"
            >
        </template>
    </sTitle>

sButton

• @params {String} content

  • btn显示内容。也支持标签中间写。默认会加载到slot中

• @params {string} type

  • btn的类型。现在默认有 success,default,warning,danger,primary

• @params {string} size

  • btn的大小。 默认default.也可以设置small

• @params {Function} touchstart

  • 现在仅添加了@touchstart事件

#demo

<sButton
    :type='item.type'
    :size='item.size'
    @touchstart="testButtonTest"
>
{{item.content}}
</sButton>

sSearch

• @params(Boolean) showAction
  • 是否显示右边的按钮。默认不开启
• @params(String) label:string
  • 右边按钮的内容。默认搜索
• @params(Function) labelCallback
  • 右边按钮的点击事件。
• @params(Function) search
  • 点击换行搜索。
• @params(Boolean) filterable
  • 是否需要有下拉列表。
• @params(Function) filterCallback
  • 点击label回调函数，返回点击的内容跟下标
• @params(Boolean) loading

  • 是否显示loading.与filter一起使用

#demo

<sSearch 
    :show-action='true'
    :label='123'
    @labelCallback='callback'
    @search='search'
    :searchList='[]'
    :filterable='false'
    @filterCallback='testFilterCallback'
    :loading='false'
></sSearch>

sNotify

• @params({ default: false, type: Boolean }) autoClose

  • 是否自动关闭

• @params({ default: "default", type: String }) type

  • 类型。默认default，还有info，fail类型;

• @params({ default: "暂无内容", type: String }) content

  • 显示内容;

• @params({ default: 3000, type: Number }) duration

  • 多长时间以后关闭;

• @params({ type: Function }) callback

  • 当type为info的时候执行的回调函数;

this.$sNotify({
    content: "测试一下1",
    type: "info",
    callback: () => {
    this.$toast("right");
    }
});