uniapp使用uni-ui组件库的uni-goods-nav组件,删除了示例中的option数组,还是会出现“店铺”、购物车的按钮和字样

本文主要是介绍uniapp使用uni-ui组件库的uni-goods-nav组件,删除了示例中的option数组,还是会出现“店铺”、购物车的按钮和字样,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题

uniapp使用uni-ui组件库的uni-goods-nav组件,删除了示例中的option数组,还是会出现“店铺”、购物车的按钮和字样

  • 在vue文件中
    在这里插入图片描述
  • 展示页面
    在这里插入图片描述

原因

在uni-goods-nav组件的源码中,内置了“店铺”和“购物车”的按钮和样式,还包括了加入购物车、购买这两个按钮

<script>import {initVueI18n} from '@dcloudio/uni-i18n'import messages from './i18n/index.js'const {	t	} = initVueI18n(messages)/*** GoodsNav 商品导航* @description 商品加入购物车、立即购买等* @tutorial https://ext.dcloud.net.cn/plugin?id=865* @property {Array} options 组件参数* @property {Array} buttonGroup 组件按钮组参数* @property {Boolean} fill = [true | false] 组件按钮组参数* @property {Boolean} stat 是否开启统计功能* @event {Function} click 左侧点击事件* @event {Function} buttonClick 右侧按钮组点击事件* @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />*/export default {name: 'UniGoodsNav',emits:['click','buttonClick'],//重点,已经存在了shop和cartprops: {options: {type: Array,default () {return [{icon: 'shop',text: t("uni-goods-nav.options.shop"),}, {icon: 'cart',text: t("uni-goods-nav.options.cart")}]}},buttonGroup: {type: Array,default () {return [{text: t("uni-goods-nav.buttonGroup.addToCart"),backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',color: '#fff'},{text: t("uni-goods-nav.buttonGroup.buyNow"),backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',color: '#fff'}]}},fill: {type: Boolean,default: false},stat:{type: Boolean,default: false}},methods: {onClick(index, item) {this.$emit('click', {index,content: item,})},buttonClick(index, item) {if (uni.report && this.stat) {uni.report(item.text, item.text)}this.$emit('buttonClick', {index,content: item})}}}
</script>

解决办法

既然内置了,那么在组件源码中删除就好了
步骤:

找到node_modules文件下的@dcloudio文件夹,在这个文件夹下找到uni-ui文件,再找到uni-goods-nav文件,打开uni-goods-nav.vue文件,将文件中的option注释掉就好了

在这里插入图片描述
问题解决

这篇关于uniapp使用uni-ui组件库的uni-goods-nav组件,删除了示例中的option数组,还是会出现“店铺”、购物车的按钮和字样的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/510642

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》:本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja

spring中的ImportSelector接口示例详解

《spring中的ImportSelector接口示例详解》Spring的ImportSelector接口用于动态选择配置类,实现条件化和模块化配置,关键方法selectImports根据注解信息返回... 目录一、核心作用二、关键方法三、扩展功能四、使用示例五、工作原理六、应用场景七、自定义实现Impor

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项

nginx启动命令和默认配置文件的使用

《nginx启动命令和默认配置文件的使用》:本文主要介绍nginx启动命令和默认配置文件的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录常见命令nginx.conf配置文件location匹配规则图片服务器总结常见命令# 默认配置文件启动./nginx

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程:安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4

mysql中insert into的基本用法和一些示例

《mysql中insertinto的基本用法和一些示例》INSERTINTO用于向MySQL表插入新行,支持单行/多行及部分列插入,下面给大家介绍mysql中insertinto的基本用法和一些示例... 目录基本语法插入单行数据插入多行数据插入部分列的数据插入默认值注意事项在mysql中,INSERT I

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

Windows下C++使用SQLitede的操作过程

《Windows下C++使用SQLitede的操作过程》本文介绍了Windows下C++使用SQLite的安装配置、CppSQLite库封装优势、核心功能(如数据库连接、事务管理)、跨平台支持及性能优... 目录Windows下C++使用SQLite1、安装2、代码示例CppSQLite:C++轻松操作SQ