若依框架学习

chxljtt

已于 2024-02-01 14:45:31 修改

阅读量577

点赞数 7

分类专栏： java 文章标签：学习

于 2024-01-28 20:28:28 首次发布

本文链接：https://blog.csdn.net/chxljtt/article/details/135900001

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3中如何实现自定义主题，使用SVG图标的方法，以及对比Vue2.0和3.0的差异，还提到了深层选择器的更新和日期处理库Moment的基础用法。

摘要由CSDN通过智能技术生成

1、若依前端Vue3模板——自定义主题+炫彩主题

修改为

<template>

  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
  <!-- <div>
    <svg-icon icon-class="question" @click="goto"
      :color="sideTheme === 'theme-dark' || sideTheme === 'theme-light' ? variables.navbarIconColor : variables.navbarBlueColor" />
  </div> -->

</template>

<script>
// import variables from '@/assets/styles/variables.module.scss'
// import useSettingsStore from '@/store/modules/settings'

// const settingsStore = useSettingsStore();
// const sideTheme = computed(() => settingsStore.sideTheme);

export default defineComponent({
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
  },
  setup(props) {
    return {
      iconName: computed(() => `#icon-${props.iconClass}`),
      svgClass: computed(() => {
        if (props.className) {
          return `svg-icon ${props.className}`
        }
        return 'svg-icon'
      })
    }
  }
})


</script>

<style scope lang="scss">
.sub-el-icon,
.nav-icon {
  display: inline-block;
  font-size: 15px;
  margin-right: 12px;
  position: relative;
}

.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

2、若依vue3框架实现自定义换肤

3、Vue2.0和3.0区别(总结版，不断更新)

4、vue3项目开源项目运行报错::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instea...

5、日期处理库moment的基本使用