用 vue 练习写了一个商品详情页, 选择商品规格联动的效果
- <style>
- .trait{
- width: 100%;
- height: auto;
- font-size: 14px;
- }
- .trait-box>.title{
- height: 60px;
- line-height: 60px;
- font-weight: bold;
- }
- .trait-box>.btn{
- width: 80px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- outline: none;
- border: 1px solid #eee;
- border-radius: 20px;
- background: none;
- }
- .trait-box>.active{
- border: 1px solid #000;
- }
- .trait-box>.dashed{
- border: 1px dashed #000;
- }
- </style>
- <h5 > 商品组合有: 白色 100 50, 黑色 80 10, 白色 80 50</h5>
- <h5 > 虚线表示禁用状态, 不可点击 </h5>
- <h5 > 实线再次点击取消选中 </h5>
- <div id="App">
- <div class="trait">
- <div class="trait-box" v-for="(item, index) in traitListOther" ::key="index">
- <div class="title">{{item.name}}</div>
- <button class="btn" v-for="(m, n) in item.detail" ::key="n" :disabled="m.isShow" :class="{'active': item.value === m.value,'dashed': m.isShow}" @click="selectTrait(item.name, m.value)">{{m.value}}</button>
- </div>
- </div>
- </div>
- <script src="https://cdn.jsdelivr.NET/NPM/vue@2.5.16/dist/vue.js"></script>
- <script>
- var App = new Vue({
- el: '#App',
- data: {
- testData: [],
- traitList: [],
- traitListOther: [],
- good_id: 1
- },
- created() {
- // 测试用数据 data
- this.testData = [
- {
- good_id: 1, // id
- detail: [ // 规格属性
- {
- name: '颜色',
- value: '白色'
- }, {
- name: '身高',
- value: '100'
- }, {
- name: '大小',
- value: '50'
- }
- ]
- }, {
- good_id: 2,
- detail: [
- {
- name: '颜色',
- value: '黑色'
- }, {
- name: '身高',
- value: '80'
- }, {
- name: '大小',
- value: '10'
- }
- ]
- }, {
- good_id: 3,
- detail: [
- {
- name: '颜色',
- value: '白色'
- }, {
- name: '身高',
- value: '80'
- }, {
- name: '大小',
- value: '50'
- }
- ]
- }, {
- good_id: 4,
- detail: [
- {
- name: '颜色',
- value: '黑色'
- }, {
- name: '身高',
- value: '100'
- }, {
- name: '大小',
- value: '50'
- }
- ]
- }
- ]
- // 处理数据 - 展示循环用
- for (let n of this.testData[0].detail) {
- this.traitListOther.push({
- name: n.name, // title 规格名称
- value: '', // 规格当前选中值
- detail: [], // 规格包含的所有值
- arr: []
- })
- }
- for (let m of this.testData) {
- for (let n of m.detail) {
- for (let k of this.traitListOther) {
- if (k.name === n.name && k.arr.indexOf(n.value) === -1) {
- k.detail.push({
- value: n.value,
- isShow: false
- })
- k.arr.push(n.value)
- }
- }
- }
- }
- // 数据处理 - 对比用
- for (let m of this.testData) {
- let obj = {
- goods_id: m.good_id,
- detail: {}
- }
- for (let n of m.detail) {
- obj.detail[n.name] = n.value
- }
- this.traitList.push(obj)
- }
- console.log(this.traitList, this.traitListOther, '循环展示数据')
- },
- methods: {
- // 选择规格
- selectTrait (name, detailVal) {
- let arrO = {}
- for (let m of this.traitListOther) {
- if (name === m.name) {
- if (m.value === detailVal) {
- m.value = ''
- } else {
- m.value = detailVal
- }
- }
- arrO[m.name] = m.value
- }
- this.makeData(arrO)
- console.log(arrO)
- },
- // 规格数据处理
- makeData (arrO) {
- for (let n of this.traitListOther) {
- for (let i of n.detail) {
- i.isShow = true
- }
- }
- for (let m of this.traitList) {
- for (let n of this.traitListOther) {
- for (let i of n.detail) {
- let obj = {}
- let objBool = {}
- for (let k in arrO) {
- obj[k] = arrO[k]
- objBool[k] = false
- }
- for (let k in obj) {
- if (k === n.name) {
- obj[k] = i.value
- }
- }
- for (let k in obj) {
- if (obj[k] === '' || obj[k] === m.detail[k]) {
- objBool[k] = true
- }
- }
- let onowhat = true
- for (let p in objBool) {
- if (!objBool[p]) {
- onowhat = false
- }
- }
- if (onowhat) {
- i.isShow = false
- }
- }
- }
- }
- }
- }
- })
- </script>
来源: http://www.qdfuns.com/article/22516/91032a120034c5f6fae20c4027c6199d.html