mpvueウィジェットRate星スコア

mpvueウィジェットRate星スコア
目次[TOC]を使用してディレクトリを生成します.

mpvueウィジェットRate星スコア

ディレクトリ

でも

so

長い話を多くして、mpvue-weuiの中でこのように言います:

Rateコンポーネントはhtml 5のdata属性を使用して実装され、採点領域をクリックするとdata属性の値が取得され、vueのclassによって採点星の状態、すなわちactiveか否かが制御される.イベントをクリックすることでその星の属性を変えることはよく知られています.

でも
まずmpvue-uiのコードを見てみましょう

<template>
    <div class="page__bd">
      <div class="weui-cells__title">    div>
      <div class="weui-cells__title">{{rateScore}}div>
      <div class="weui-rate-wrap">
        <ul class="weui-rate">
          <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= tempValue}" :data-index='index' @click="selectRate">
            <div class="weui-rate-item-def">div>
          li>
        ul>
      div>
    div>
  div>
template>

<script>
export default {
  data() {
    return {
      max: 5,
      rateScore: '',
      rateScoreDesc: ['     ，      ', '   ，   ', '  ，    ', '    ，    ', '    ,    '],
      tempValue: 3
    }
  },
  methods: {
    selectRate(e) {
      this.tempValue = e.mp.currentTarget.dataset.index;
      this.rateScore = this.rateScoreDesc[this.tempValue];
    }
  }
}
script>

<style>
style>

简単明瞭で、直接持ってきてcopy、星が现れていないことを発见します!!!どんな状況ですか.後で気づいたcssにはweui-rate-wrapというスタイルもweui-rate-itemというスタイルもなく、もちろんweui-rate-item-activeというスタイルもありません.気まずいですね.使えませんね.gitlabに行って最新のソースコードを見ても、これらのスタイルはありません.本当に卵が痛い.
so
実はあなたはすでに原理を知っていますか?実は星の状态を変えるのではありませんか?私は注文して、それは明るい星になります.だから、ネット上で2つの画像をダウンロードして、1つの明るい星、1つの明るい星です.アリのアイコンライブラリを共有します.http://www.iconfont.cn/search/index?q=%E6%98%9F%E6%98%9Fたくさんの星があって、ダウンロードする时色を変えることができます
、、、、以下は、参照スタイルの問題のみを自分で調整するコードです

<template>
    <div class="page__bd">
      <div class="weui-cells__title">    div>
      <div class="weui-cells__title">{{rateScore}}div>
      <div class="weui-rate-wrap">
          <ul class="weui-rate">
            <li class="weui-rate-item" v-for="(item,index) in max" :key="index"  @click="selectRate(index)">
              <img style="width:25px;height:25px; float: left;padding-right: 20px" v-if="index <= tempValue" :src="$$imagePath + 'rateon.png'"/>
              <img style="width:25px;height:25px; float: left;padding-right: 20px" v-else :src="$$imagePath + 'rate.png'"/>
            li>
          ul>
        div>
    div>
  div>
template>

<script>
export default {
  data() {
    return {
      order_detail:{},
        max: 5,
        rateScore: '',
        rateScoreDesc: ['     ，      ', '   ，   ', '  ，    ', '    ，    ', '    ,    '],
        tempValue: -1,
    }
  },
  computed: {
      $$imagePath() {
        return this.$imagePath
      },
    },
  methods: {
    selectRate(e) {
        console.log("e:"+e)
        this.tempValue = e;
        this.rateScore = this.rateScoreDesc[this.tempValue];
      },
  }
}
script>

<style>
  .weui-form-preview {
    margin-bottom: 25px;
  }
.weui-rate-item{
    display:inline-block;
    padding-right: 30px;
    width: 10px;
    height: 10px;
  }
style>

main.js{Vue.prototype.$imagePath='../...../static/'//ピクチャパス}