uni-app & view & block & template All In One

uni-app & view & block & template All In One

<template>
    <!-- 图表容器 -->
    <view>
        <!-- 按钮组 -->
        <!-- <div class="pull-right m-t-8 m-b-30" slot="switch-block">
            <el-radio-group
                v-model="dimension" size="mini" v-if="isShowDimension"
                @change="handleChangeDimension">
                <el-radio-button v-for="item in dimensionList" :key="item.value" :label="item.value">
                    {{item.name}}
                </el-radio-button>
            </el-radio-group>
        </div> -->
        <view class="" v-for="({name, value}, index) in buttons" :key="value + index">
            <block>
                <view class="span-view">{{name}}</view>
                <view class="span-view">{{value}}</view>
            </block>
        </view>
        <!-- 覆盖样式 radio-group，还不如重新写一套 -->
        <radio-group @change="radioChange">
            <view class="" v-for="({name, value}, index) in buttons" :key="value + index">
                <block>
                    <radio class="span-view" :value="value" :checked="index === current" />
                    <view class="span-view">{{name}}</view>
                </block>
            </view>
        </radio-group>
        <!-- <radio-group @change="radioChange">
            <label class="" v-for="({name, value}, index) in buttons" :key="value">
                <block>
                    <radio :value="value" :checked="index === current" />
                </block>
                <block>
                    <view>{{name}}</view>
                </block>
            </label>
        </radio-group> -->
        <!-- block 等价于 inline-block -->
        <block v-for="({name, value}, index) in buttons" :key="index">
            <button size="mini" type="primary" @click="changeData(value)">{{name}}</button>
        </block>
        <!-- <block v-for="(item, index) in buttons" :key="index">
            <view>{{item.name}}</view>
            <view>{{item.value}}</view>
            <button @click="changeData(item.value)">{{item.name}}</button>
        </block> -->
        <!-- view 等价于 block -->
        <view v-for="({name, value}, index) in buttons" :key="index + 1000">
            <button size="mini" @click="changeData(value)">{{name}}</button>
        </view>
        <!-- <view v-for="(item, index) in buttons" :key="index + 1000">
            <view>{{item.name}}</view>
            <view>{{item.value}}</view>
            <button @click="changeData(item.value)">{{item.name}}</button>
        </view> -->
        <!-- <block v-for="(item, index) in buttons" :key="index">
            <view v-for="(itemList, indexList) in item.prod" :key="indexList">
                <view>{{itemList.devCode}}</view>
            </view>
        </block> -->
        <button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
        <button @click="changeOption">更新数据</button>
        <!-- 图表 -->
        <view class="charts-box">
            <qiun-data-charts
                type="line"
                :opts="{dataLabel:true}"
                :chartData="chartsDataLine1"
                :canvas2d="true"
                canvasId="components_test_line"
            />
        </view>
        <!-- <div slot="wrapper-block" style="margin-top: 81px;">
            <ve-histogram
                style="margin-bottom: -50px;"
                :data="chartData"
                :settings="chartSettings"
                :colors="chartColors"
                :extend="chartExtend"
                :loading="chartLoading"
                :data-empty="dataEmpty"
                height="300px" width="100%">
            </ve-histogram>
        </div> -->
    </view>
</template>

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---