Vue3+ElementUIPlus颜色选择器,Ruoyi框架动态替换图片

这篇具有很好参考价值的文章主要介绍了Vue3+ElementUIPlus颜色选择器,Ruoyi框架动态替换图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求为,需要动态的替换头部和底部图片的颜色,通过固定的颜色

Vue3+ElementUIPlus颜色选择器,Ruoyi框架动态替换图片,vue.js,javascript,前端

 Vue3+ElementUIPlus颜色选择器,Ruoyi框架动态替换图片,vue.js,javascript,前端

要实现可以动态的通过颜色,去替换的效果。

一、通过将选择的颜色,通过Vuex来进行一个存储,用户后续的使用

        <el-form-item label="顶部底部背景" prop="menuColor">
          <div class="content-picker">
            <el-color-picker
                popper-class="custom-color-picker"
                :predefine="preColors"
                v-model="customForm.menuColor"
            ></el-color-picker>
          </div>
        </el-form-item>



/**改变主题 */
const changeTheme = () => {
  handleTheme('theme-custom',
      {
        menuBgColor: customForm.value.menuBgColor,
        menuColor: customForm.value.menuColor,
        menuTextColor: customForm.value.menuTextColor,
        headerTextColor: customForm.value.menuTextColor,
      });
  showCustomDia.value = false;
}

/**自定义顶部底部颜色的数组 */
const preColors = ref([
  '#000000',
  '#00B578',
  '#07B9B9',
  '#8A38F5',
  '#396BDF',
  '#808080',
  '#EB2F96',
  '#FA5151',
  '#FF8F1F',
  '#FFC300',
])

并且自定义出你需要的颜色,并且修改el-color-picker的样式。由于我们自定义了下拉的样式

popper-class="custom-color-picker",所以不用担心会对颜色选择器造成影响。

 

<style lang="less">
.content-picker{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.custom-color-picker {
  .el-color-predefine {
    width: 300px !important;
  }
  .el-input__inner,
  .el-color-dropdown__link-btn,
  .el-color-predefine__color-selector {
    margin: 8px 10px !important;
    height: 40px !important;
    width: 40px !important;
  }
  .el-color-dropdown__main-wrapper {
    margin-bottom: 6px;
    display: none;
  }
  .el-input--small .el-input__wrapper {
    padding: 1px 7px;
    display: none;
  }
}
</style>

 通过这样的样式后,样式就会变成图片的效果这样,并且进行了一定程度的优化,可以有清空的按钮。后续通过保存,将这个颜色保存到Vuex中。

二.动态替换选择的颜色的图片

Vue3+ElementUIPlus颜色选择器,Ruoyi框架动态替换图片,vue.js,javascript,前端

将你需要替换的颜色以去掉#的形式存放在asset的目录下 (简而言之,去掉 # 是为了确保路径的正确解析和访问,因为 # 在 URL 和文件系统中可能会被特殊处理。)

 

这样我们可以通过Vuex取出拿到的颜色,可以与你存储在asset目录下的图片的颜色保持一致。

/**
 * 系统设置
 */
const storeSettings = computed(() => store.state.settings);
const menuColor = computed(() => {
  return storeSettings.value.menuColor ? storeSettings.value.menuColor.replace('#', '') : undefined;
})
const getBackgroundImageUrl = (color) => {
  if (!color) {
    return new URL(`../../../assets/images/layout/Bottom_Nav2.png`, import.meta.url).href;
  }
  return new URL(`../../../assets/logo_menui/${color}/bottom.png`, import.meta.url).href;
}
const bottomNavBgUrl = computed(() => getBackgroundImageUrl(menuColor.value));

 如果传的颜色为空的话,那就说明没有设置,需要给一个默认的图片。

通过以上方法bottomNavBgUrl.value的值就是一个图片的地址

    <div class="Bottom_Nav" :class="{ 'has-logo': settings.sidebarLogo }">

<style lang="scss" scoped>
.el-menu {
    background-color: rgb(255, 255, 255, 0);
    width: 100%;
}
.Bottom_Nav {
    //background-image: url(@/assets/images/layout/Bottom_Nav.png) !important;
    background-image: url(@/assets/images/layout/Bottom_Nav2.png);
    //background-image: url(@/assets/logo_menui/FFC300/bottom.png) !important;
    background-size: 100% 100% !important;
    // position: absolute!important;
    // bottom: -22px!important;
    //background-color: rgb(255, 255, 255, 0) !important;
    background-repeat: no-repeat !important;
    padding: 0 15%;
    //padding-left: 8%;
}
</style>
onMounted(() => {
    // 获取第一个具有类名 .Bottom_Nav 的元素
    const bottomNav = document.querySelector('.Bottom_Nav');

    if (bottomNav) {
      bottomNav.style.backgroundImage = `url(${bottomNavBgUrl.value})`;
    }
});

通过document的方式取到class为Bottom_Nav的类(可以自行替换) 

通过设置backgroudImage的方式将图片的以url()的形式替换为自定义颜色的图片。 文章来源地址https://www.toymoban.com/news/detail-814163.html

到了这里,关于Vue3+ElementUIPlus颜色选择器,Ruoyi框架动态替换图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ruoyi-nbcio-plus基于vue3的flowable增加开始节点的表单绑定修改

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统  gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio

    2024年03月23日
    浏览(45)
  • 【vue + element ui】ColorPicker 颜色选择器的使用

    组件提供的 ColorPicker 颜色选择器不能满足实际需求,所以在此基础上使用了自定义的方式进行使用 我这边的使用场景是 ColorPicker 与 el-input 输入框的联动使用,在这里参考了下面博主的文章 https://blog.csdn.net/s1441101265/article/details/109672819 1.自定义组件 inputColor.vue 2.父组件引入该

    2024年02月04日
    浏览(34)
  • RuoYi-Vue-generator 代码生成模块 动态 多数据源切换 前端+后台

    需求场景: 若依框架的30张数据表 和 业务使用的数据表,同数据源,但分开的两个库,原生若依只支持主库的代码生成,故自己修改添加代码来实现 若依多数据源的使用 修改页面ruoyi-uisrcviewstoolgenimportTable.vue el-form 中新增 el-form-item 添加 data 添加方法 ruoyi-uisrcapitool

    2024年02月04日
    浏览(41)
  • ruoyi-vue前后端分离框架上传图片不显示问题,nginx解决方案

    使用若依前后端分离框架,前端项目打包在Nginx,上传图片时,图片上传成功,但是在列表页和添加/修改页面没有正常显示。 插入成功后数据库保存数据样式: 回显数据时样式: 此时样式是打不开的,无法找到路径 解决办法:nginx.conf在location中添加alias location /prod-api/profil

    2024年02月02日
    浏览(47)
  • vue3自定义按钮点击变颜色实现(多选功能)

    实现效果图: 默认选中第一个按钮,未选中按钮为粉色,点击时颜色变为红色 利用动态类名,当定义isChange数值和下标index相同时,赋予act类名,实现变色效果

    2024年01月19日
    浏览(39)
  • ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统  gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio

    2024年04月16日
    浏览(44)
  • ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统  gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vu

    2024年04月28日
    浏览(34)
  • Aidex 移动端快速开发框架# RuoYi-Uniapp项目,uniapp vue app项目跨域问题

     参考地址: manifest.json官方配置文档:manifest.json 应用配置 | uni-app官网 Chrome 调试跨域问题解决方案之插件篇: uni-app H5跨域问题解决方案(CORS、Cross-Origin) - DCloud问答 其实uni-app官方有解决跨域的办法,官方推荐使用HBuilderX中内置的浏览器去预览,在内置的浏览器中不会存

    2024年02月11日
    浏览(33)
  • vue3-实战-12-管理后台-权限管理之菜单管理模块-首页-主题颜色-暗黑模式

    目录 1-列表页面功能开发 1.1-需求原型分析 1.2-接口和数据类型定义 1.3-获取服务端数据渲染页面 2-新增编辑菜单 2.1-原型需求分析 2.2-表单数据收集和页面结构开发 2.3-提交或者取消 3-删除菜单 4-首页开发 5-暗黑模式的切换和主题颜色 5.1-暗黑模式 5.2-主题颜色切换       我们

    2024年02月10日
    浏览(55)
  • [Vue3] Wangeditor富文本实现将粘贴中包含的图片自动上传后台,并替换src

    前言 吐槽: 还以为他们富文本把文字写好, 在一个个上传图片, 组成一片文章. 那就没有办法了, 只能修改下代码增加下自动上传图片功能. 后来写到一半才发现html 有个属性好像可以让跨域的图片 显示出来. meta name=\\\"referrer\\\" content=\\\"no-referrer\\\" / 以为这样就可以不用写了, 但是老大

    2024年02月04日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包