master

分支 (1)

管理

管理

master

ShopTemplate
/
Steper.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">
    <link rel="stylesheet" href="css/shop.css">
    <!-- 依赖库 axios/vue/vue-router -->
    <script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>
    <!-- vonic 核心文件 -->
    <script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>
    <script src="js/vue-shop.js"></script>
    <style>
        /*本页专用CSS*/
        td{padding: 5px 8px}
    </style>
</head>
<body>
<div id="app" style="background: #ffffff">
    <p style="height: 100px"></p>
    步进为3的： <cts-steper max="99" min="1" :default="2" step="3" :on-change="changeVal" :readonly="false" class="pull-right" :param="{id:1,key:2}"></cts-steper>
    <p></p>
    步进为1的白色： <cts-steper max="99" min="1" :on-change="changeVal" :readonly="false" class="pull-right" theme="white"></cts-steper>
    <p style="height: 100px"></p>
</div>
<div style="background: #ffffff">
    <p>
        使用方法：
        <br/>
        先引入vonic的JS和CSS 然后引入本插件的CSS和JS
        &ltcts-steper max="99" min="1" default="2" step="3" :on-change="changeVal" :readonly="false" class="pull-right"&gt&lt/cts-steper&gt
        然后JS中定义VUE。
    </p>
    <p>参数列表:</p>
    <table>
        <tr>
            <td>参数</td>
            <td>说明</td>
            <td>默认值</td>
            <td>类型</td>
        </tr>
        <tr>
            <td>default</td>
            <td>默认值</td>
            <td>1</td>
            <td>string | number</td>
        </tr><tr>
            <td>min</td>
            <td>最小值</td>
            <td>0</td>
            <td>string | number</td>
        </tr>
        <tr>
            <td>max</td>
            <td>最大值</td>
            <td>9999</td>
            <td>string | number</td>
        </tr>
        <tr>
            <td>step</td>
            <td>步值，每点击增加或减少的数值</td>
            <td>1</td>
            <td>string | number</td>
        </tr>
        <tr>
            <td>readonly</td>
            <td>是否允许输入,true:只读，false：可写,<span style="color: red">必须动态绑定</span></td>
            <td>true</td>
            <td>boolean</td>
        </tr>
    </table>
    <p>事件：
        <br/>
        on-change，
        当数值变化的时候，触发的事件，<span style="color: red">必须动态绑定</span>
    </p>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods: {
            changeVal(e,p){
                console.log(e);
                console.log(p);
            }
        },
    });
</script>
</body>
</html>