Vueスキン変更機能サンプルチュートリアル

私は最近、Vue の小規模なモバイル デモに数か月間取り組んできました。そのうちの 1 つは、各ページの統合スキニング機能を実装しています。この記事では主に Vue をベースにしたスキン変更機能のサンプルコードを紹介しますが、編集者が非常に良いと思ったので参考にさせていただきます。編集者をフォローして見てみましょう。

最初に実装を見てみましょう

テーマカラーを設定します

合理的に言うと、段階的に実装できるいくつかのポイントがあると思います:

1.カラー値

2. scss のニッチな用途 (多変数 CSS 値の一括設定)

3. グローバル イベント バスの応用

1 カラー値の選択と原則

を読むことをお勧めしますAnt Financial のデザイン ガイドラインには、一般的なインタラクションとインターフェイスのデザインに関する優れたガイドラインと提案が含まれています。読書が好きな人は、「Design Book forEveryone」を読むこともできます。

インターフェースのカラー要素については、通常、視覚的な連続性、つまり同じ色のセットを維持する必要があり、同じカラーサークル上のカラー値を使用するようにしてください

カラー値同じリングに色のセットを付けると、よりコーディネートに見えます

そこで、ここではアリデザインの提案を採用し、特定の色の値の列をシリーズのテーマカラーとして使用します（公式を参照してください）特定の色の値については Web サイトを参照してください~)

そして、いくつかの特別な機会では、コイントスページの 2 つの色のような色の違いを表現する必要があります。

2 は形式の色の値を変換します16 進数のカラー値に変換します

ここでは、テーマカラーの透明度を設定することでさまざまな色を区別します。次に、#123456 などの 16 進数のカラーグローバル変数をテーマとして保存します。ここでは、カラー値をそのような形式に変換する必要があります。 rgba で表される色の値に変換するコードは次のとおりです

hexToRgba (hex, opacity = 0.3) {
  let color = []
  let rgb = []
  hex = hex.replace(/#/, '')
  for (let i = 0; i < 3; i++) {
   color[i] = &#39;0x&#39; + hex.substr(i * 2, 2)
   rgb.push(parseInt(Number(color[i])))
  }
  return `rgba(${rgb.join(&#39;,&#39;)},${opacity})`
 }

3 scss のニッチな用途

ようやく欲しかったテーマカラーのリストが得られました

コードをコピーしますコードは次のとおりです:

$colors: #f04134, #00a854, #108ee9, #f5317f , #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238;

非常に直接的なアイデアです。各ビュー ページでテーマを設定するために必要な要素の色 (テキストやアイコンの色、頭の背景など) を定義します。 そこで、アプリ内でカラー変数を定義し、それを各ビュー コンポーネントに配布し、このグローバル変数を使用してすべてのルーティング ページのカラーを制御し、さまざまなテーマ効果を実現します。

ディスパッチの実装については次のセクションで説明します。ここで最初のステップを簡単に抽出できます:

4 グローバル カラーを設定して保存します

インターフェイスに関する簡単な説明:

この機能をホームページに直接実装しました。このプロジェクトでは、mint-ui フレームワーク (Ele.me チームのモバイル フレームワーク。残念ながら、element.ui ほど使いやすくはありません) を導入しました。インタラクションのセットアップは、弾性レイヤー mt-popup の形式で行われます。次に、カラー ブロックを直接クリックして、対応するカラー値を設定します

<!-- 設置顏色 -->
  <mt-popup v-model="changColor" position="bottom" class="color-panel">
   <p class="color-items">
     <span class="color-item" v-for="(item, $index) in colors" :key="$index" @click="chooseColor(item)">
      <span class="color-cycle" :class="&#39;bg-color&#39; + ($index + 1)"></span>
      </span>
   </p>
  </mt-popup>

。すると、上記のコードからカラー ブロック p が表示されます。このようなCSSスタイルシートを簡単に見ることができます

.bg-color1 {background: #f04134}
.bg-color2 {background: #f04134}
.bg-color3 {background: #f04134}
.bg-color4 {background: #f04134}
···

Write コーディングをしているときに、似たようなことが繰り返し現れると、私たちは常に漠然と「そろそろ実行する時期だ」と感じます。プロジェクトが成長すると、color1、borderColor1 など、単一設定のフォントの色や境界線の色のスタイル シートが多数存在する可能性があります。このように、テーマ カラーの配列に従ってそれぞれの表現形式を記述する必要があります。改造費用も高額になります。私の書き方はこんな感じです

// mixin.scss:
$colors: #f04134, #00a854, #108ee9, #f5317f, #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238;

// setColor.vue:
@import '~@/assets/mixin.scss';
···
@for $i from 1 to 10 {
    .bg-color#{$i} {
     background-color: nth($colors, $i)
    }
   }

scss よく使われるクラス名の入れ子の書き方に加えて、繰り返し書く必要があるこの種のスタイルには、控えめで贅沢な構文もたくさんあります。 , 私の同意 繰り返しループスタイルを書く必要がある場合、ミックスインファイルにscss変数を追加し、それを変数として導入することです。スタイルを書くときに、sassループを使用して、対応する値を参照します。カラー設定スタイルがどのように展開され、変化しても、それが色付きの背景であっても、境界線であっても、同じ方法をミックスイン ファイルに適用するだけで済みます。要するに、プロジェクト内のフォント サイズと間隔の値を統一するということです。Bar

5 小さなロジックを試してみましょう。

这个项目里面localstorage 基本被当成数据库使用了，所以点击色块设置主题时候，我们假装发出请求，在localstorage存储我们改变的颜色就好了( ./static/api.json 是一个返回helloword 的json， 为了写实在这里这么用，$bus 事件巴士下面说， 作用就是设置全局的主题颜色变量，localStorage 模拟我们把设置存储到后台，每次重新打开页面就去获取这些设置值）， 目前为止，我们的设置页面就大致完成了

// 假装调用接口设置颜色
  chooseColor (color) {
   this.$axios.get('./static/api.json')
    .then((data) => {
     this.$bus.$emit('set-theme', color)
     this.changColor = false
     localStorage.setItem('themeColor', color)
    })
    .catch((data) => {
     console.log(data)
    })
  }

6 事件巴士的运用

在上一步最后我们有个关键的东西没完成， this.$bus.$emit('set-theme', color) ，将选取的颜色设置到全局，我的代码结构是这样的

 

子组件

68d8f6da816bfab17f7bba8f32b5bcb7 是 home 页面 的一个子组件，而在一开始我们已经说了，我们想在我们在app.vue (home.vue和其他view的父组件） 里面定义一个color变量，派发到各个view组件里面去。 于是这其实就是个，从 setColor 触发 app.vue 的设置颜色事件， 子组件向父组件通信的问题。

我们可以很直接地用绑定事件配合 emit() 的做法，在 app.vue 定义一个 setglobalColor 方法， 并绑定到router-view(包含了home.vue)，接着在home组件继续定义一个 setglobalColor 方法， 实现的功能就是 emit('setglobalColor') 去触发app.vue的方法， 并把 home.vue 的这个 setglobalColor 继续绑定到组件， 组件里面点选颜色时候，直接emit这个方法就行了。

为什么我想用事件巴士.vue 的事件巴士和 vuex， 在一些有追求的程序员手里总是小心翼翼的，我也一样，因为作为涉及全局的东西，一般觉得能不用就不用，代码能精简就精简，我们经常用一个词，不提倡。

可是有朝一日我经常在想，代码的可读性可维护性，和性能以及“风险”相对比，到底哪个更重要。对于事件巴士和vuex 这类全局性质的方案的主要担忧大部分在于， 他们是全局的，可能因为一个事件名变量名一致就造成冲突，在小型项目还会造成冗余和额外开销。 但事实上，事件和变量的命名我们都可以通过约定去规范，而在表现上，使用了事件巴士和vuex的项目，在性能上和直接 props 传递数据，emit 回调事件的项目相比，其实并没有太大区别，反而是无止境的 props 和 emit ，给人一种麻烦难以维护的感觉。 像上述的 setglobalColor , 仅仅是跨越了两层组件， 过程就显得繁琐了。所以我建议在出现两级以上组件层次，数据流稍微多的项目中都可以这么去做，定义一个全局的事件巴士

export default (Vue) => {
 let eventHub = new Vue()
 Vue.prototype.$bus = {
  $on (...arg) {
   eventHub.$on(...arg)
  },
  $off (...arg) {
   eventHub.$off(...arg)
  },
  $emit (...arg) {
   eventHub.$emit(...arg)
  }
 }
}

将事件巴士绑定到当前vue对象，使用时候只需要:

this.$bus.$on('set-theme', (color) => {··· })
this.$bus.$emit('set-theme', '#000000')

在这个demo中，我在app.vue 绑定了

this.$bus.$on('set-theme', (color) => {
   this.loadingColor = color
   this.userinfo.color = color
  })

而在 setColor.vue 则在点击颜色块时候触发 this.$bus.$emit('set-theme', color)， 则能实现我们设置全局颜色的效果。这样的好处在于，对于跨了多个层次，或者兄弟组件的通信，我们不再需要太繁琐的props，比如我在header.vue 也绑定了 this.$bus.$on('set-theme', (color) => { }) ，在 this.$bus.$emit 发生时候，header 的背景颜色就能直接改变，而不需要等待app.vue 将 全局的color值props传递到header.vue里面（仅做示例，这里 header.vue 只是 app.vue 的下一层级，通过props数据流会更清晰）

而对于其他路由页面组件，和 app.vue 都是直接上下级关系，我们依然采用props保持一个清晰的数据流向下传递， demo 里我是将 color 存在userinfo(以后还有其他数据）， userinfo传到每个子路由， 最后，每个页面在创建时候，通过拿到这个全局的颜色，再用dom去更改对应的样式就好啦，例如

mounted () {
  this.$nextTick(() => {
   // 绑定设置主题的事件，一旦触发修改主题，则将当前字体颜色改为对应颜色
   this.$el.querySelector('.myTitle').style.color = this.userinfo.color
   this.$el.querySelector('.weui-btn_primary').style.backgroundColor = this.userinfo.color
   this.$el.querySelector('.add_icon').style.color = this.userinfo.color
  })
 }

详细的实现请参照项目代码，这里我只挑一些比较清奇的点出来讨论，项目和代码的一些规范和习惯还是挺重要的，希望有好的实践能互相借鉴进步~

相关推荐：

jQuery结合jQuery.cookie.js插件实现换肤功能示例

Javascript结合css实现网页换肤功能_javascript技巧

JQuery 网站换肤功能实现代码_jquery

以上がVueスキン変更機能サンプルチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。