MY_ICON

最新推荐文章于 2022-12-12 09:42:54 发布
最新推荐文章于 2022-12-12 09:42:54 发布
阅读量453 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/x1779702681/article/details/89735239

app自定义图标 vue_uniapp自定义图标组件
weixin_36073697的博客
01-26 413
这里赘述下，只是记录下自己的学习官网示例如下：my-icon组件的代码如下export default {name: 'myIcon',props: {/*** 自定义字体图标库前缀*/prefixClass: {type: String,default: 'uni-icon'},type: {type: String,default: ''},color: {type: String,defau...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
美奇软件开发工作室
11-06 2098
一、通过阿里图标库生成iconfont.wxss 1、登录阿里图标库官网https://www.iconfont.cn/，新建一个项目，例如我新建的项目是my-icon 2、把需要的图标加入购物车，然后再添加到项目里 3、打开项目，选择“Font class”类型，点击下载至本地 二、创建icon组件 1、新建my-icon文件夹，用来保存组件。在my-icon文件夹下分别创建...
微信小程序项目中使用icon图标
分享互联网的有趣知识~
12-12 4045
iconfont这个前缀不是固定的，根据icon名字来，icon的前缀为my-icon-xxxx，那么前缀就是 my-icon。新建一个view，在上面加一个class，复制icon名字上去即可，注意格式，格式为iconfont icon名。没有前缀或者设置了前缀，一般都是使用iconfont，根据项目视情况而定，这里以my-icon举例。my-icon my-icon-fontxxx
ionic3自定义icon图标（简单版！）
lxhjh的专栏
04-04 2803
源自:https://blog.youkuaiyun.com/qq993284758/article/details/78107412第一步：我们可以去阿里图标网找我们要的图标：http://www.iconfont.cn/然后点击最右上角的购物车，选择svg图可以选择自己想要的颜色。点击：下载素材，选择svg，注意不要选png。png图在手机上会失真的。把svg图片下载下来。第二步：在assets文件夹下创...
MFC.Design.View.icon.control.code.rar_MFC Icon_icon_icon mfc
09-20
CStatic* pStaticCtrl = (CStatic*)GetDlgItem(IDC_MY_ICON_STATIC); pStaticCtrl->SetIcon(myIcon.m_hIcon, TRUE); ``` 参数TRUE表示图标具有焦点，如果设置为FALSE，则表示无焦点状态。 除了直接在控件上显示...
Drive_Icon.zip_icon
09-14
7. **项目结构（My Project）**: “My Project”是VB.NET中的一个特殊文件夹，它包含了项目级别的设置，如应用程序信息、引用、编译选项等。 总的来说，这个压缩包提供了一个VB.NET初学者教程，展示了如何创建一个...
Intent_ShortcutIconResourceTest.rar_icon
09-21
4. **设置图标**：将快捷图标的资源ID设置到`Intent`中，通过`putExtra()`方法添加额外的数据，例如`Intent.EXTRA_SHORTCUT_ICON_RESOURCE`。 5. **发送Intent**：最后，使用适当的函数（如`am_startActivity()`）...
filesysx_filesystem_icon_
10-01
This program has various file system API functions. The user interface uses a treeview and listview control ... The listview control is from my ImageList example and uses the icon associated with files.
vb.icon.display.designed.achieve.code.rar_icon
09-23
iconStream = My.Computer.FileSystem.OpenBinaryFileReader("path_to_icon_file.ico") Dim myIcon As New Icon(iconStream) ``` 接下来，我们可以将这个图标对象赋值给控件的Image属性，实现图标显示： ```vb Dim...
Vant自定义图标
zxl0428的博客
01-06 5884
使用本地字体文件 Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置url-loader import ‘vant/lib/icon/local.css’;（替换为本地） 自定义图标 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可...
Python爬虫进阶之字体反扒保姆级教程！
爬遍所有网站
09-11 952
1、网页查看 可见无论是小说文字数量还是推荐数，在我们本来页面中是好好的，可在网页源码中是一对我们看不懂的字体，这其实就是字体加密，所以我想做到字体反扒，就要破解字体加密，接下来我会为大家一一概述。 2、网页爬取代码 内容过于简单，不做过多概述 import requests headers = { "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/53..
vue-element-admin 项目从Github下载之后该怎么运行？
祈澈菇凉
11-09 1834
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。 推荐指数：star:55k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：ht...
App常用图标素材分享 icon 素材网站
热门推荐
learn8more的博客
11-05 2万+
1. FontAwesome （墨刀内置图标库）：http://fortawesome.github.io/Font-Awesome/icons/ 2. Ionicons（iOS/Android系统图标）：http://ionicons.com/ 3. The Noun Project（标志牌图标）：http://thenounproject.com/ 4. Icon Finder （图标搜...
MytabIcon（一个自定义的控件，且带有渐变效果)
小白的究极进化
03-12 542
只有代码，布局就不弄了，直接用就行 public class MyTabIcon extends View{    int color;//颜色    String text;//文本    Drawable icon;//绘制的图标        Paint iconPaint;//画图标的画笔    Paint textPaint;//画文字的画笔    Rect bounds;//矩形
[vue-element-admin]设置icon+浏览器+侧边栏等图标、标题
u013998349的博客
11-28 1万+
vue-element-admin中设置icon图标一、引入图标ICON：二、使用步骤1.src/router/index.js参考资料： 一、引入图标ICON： https://www.iconfont.cn/ 可以到https://www.iconfont.cn/上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。 二、使用步骤 1.src/router/index.js 直接在meta: { title: ‘主页’, icon: ‘dashb
sublime常用快捷键
土豆片的博客
07-25 701
1. 设置 Ctrl + `： 打开Sublime Text控制台Ctrl + K, Ctrl + B： 组合键，显示或隐藏侧栏F11： 切换普通全屏Shift + F11： 切换无干扰全屏 2. 编辑 Ctrl + Enter： 在当前行下面新增一行然后跳至该行Ctrl + Shift + Enter： 在当前行上面增加一行并跳至该行Ctrl + ←/→： 进行逐词移动，Ctrl
eclipse代码自动补全
土豆片的博客
07-23 535
一、每次输入都自动提示 设置Window->preferences->Java->Editor->Content Assist  再右下角Auto activation triggers for Java里面改为  abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ({[  这样每次输入上面字母都会自动提示了 你还可以修改
<view style="display: flex;"> <view class="group_detail"> <image style="width:34rpx;height: 34rpx;" src="@/static/My_icon/gw_person_count.png" mode=""></image> <text>{{dictTypeChange(postTypeArr,item.postType)}}</text> </view> <view class="group_detail"> <image style="width:34rpx;height: 34rpx;" src="@/static/My_icon/gw_person_count.png" mode=""></image> <text>{{item.employGap=='' || item.employGap==null ? '不限人数' : item.employGap + '人'}}</text> </view> <view class="group_detail"> <image style="width:34rpx;height: 34rpx;" src="@/static/My_icon/gw_idcard.png" mode=""></image> <text>{{item.driveMode}}</text> </view> <view class="group_detail"> <image style="width:34rpx;height: 34rpx;" src="@/static/My_icon/gw_ph_type.png" mode=""></image> <text>{{dictTypeChange(goodsTypeArr,item.goodsType)}}</text> </view> <view class="group_detail"> <image style="width:34rpx;height: 34rpx;" src="@/static/My_icon/gw_idcard.png" mode=""></image> <text>{{item.driverAge}}岁</text> </view> </view>不允许text值换行
最新发布
08-22
<think>根据用户提供的代码片段，问题在于：在flex布局的view中，text内容过长导致换行，但用户要求不允许text值换行。 解决方案： 1. 为text元素设置CSS样式，使其不换行：white-space: nowrap; 2. 为父元素view.group_detail设置溢出隐藏，并允许横向滚动，但考虑到是移动端，通常我们会使用省略号或横向滑动。但用户要求不允许换行，所以我们可以考虑让每个group_detail横向排列且不换行，同时如果内容超出容器则允许横向滚动，或者使用省略号。 但是，用户并没有说超出如何处理，只是不允许换行。所以我们可以为每个group_detail设置不换行，并且如果超出则显示省略号。 修改步骤： 在group_detail的样式中添加： white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ 但是注意，这个group_detail是flex布局的子项，它们会在一行排列。如果所有子项的总宽度超过父容器，那么父容器需要设置允许横向滚动，或者使用其他方式。 然而，用户提供的代码中，父容器是一个flex布局，且没有设置换行（默认nowrap），所以子项会一直横向排列，超出屏幕则不会换行，而是会溢出。 根据用户要求，不允许text值换行，也就是说每个group_detail内部的text不能换行，但整个group_detail作为一个整体在父容器中是可以横向排列的（即使超出屏幕）。 因此，我们只需要在每个group_detail内部对text进行控制，防止其换行，并超出部分显示省略号。 修改代码：为text元素添加样式，或者为group_detail添加样式，因为text是group_detail的直接子元素，所以我们可以将样式加在group_detail上，这样内部的text就会继承。 但是注意，group_detail本身可能也需要设置最大宽度，否则省略号可能不会生效。 具体修改如下： 在group_detail的class中，添加以下样式属性： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200rpx; /* 根据实际情况调整，或者使用flex-shrink:0来不压缩，但这样可能不会出现省略号而是直接溢出 */ 但是，由于每个group_detail的宽度可能不同，且用户可能希望它们根据内容自适应，同时不允许换行，那么我们可以不设置max-width，而是使用flex布局的属性，让每个group_detail自动收缩，但是这样省略号可能不会生效，因为宽度是自适应的，会一直扩展到内容宽度。 所以，我们需要在父容器（最外层的view）上设置overflow-x: auto; 这样如果子项总宽度超过父容器，就可以横向滚动。同时，每个group_detail不换行，并且不设置最大宽度，这样每个group_detail的宽度由内容决定，然后父容器滚动。 因此，有两种方案： 方案一：每个group_detail内部文本超出显示省略号（需要设置固定宽度或最大宽度） 方案二：父容器允许横向滚动，每个group_detail正常显示，不省略，但这样可能会占用多行高度？不会，因为父容器是flex且不换行，所以会在一行内，超出滚动。 用户要求不允许换行，所以两种方案都满足不换行，但处理方式不同。 由于用户没有具体说明超出时如何处理，我们按照常见的方案：每个group_detail内部文本超出显示省略号，同时给每个group_detail设置一个最大宽度（例如30%）。 但是，观察用户代码，每个group_detail里面有一个image和一个text，所以我们需要保证image和text在同一行，并且整体不换行。 因此，我们修改group_detail的样式： 原代码中，group_detail的样式未知，但我们可以定义。 假设我们给每个group_detail设置： flex-shrink: 0; /* 不压缩 */ max-width: 150rpx; /* 设置一个最大宽度 */ display: flex; align-items: center; /* 内部元素垂直居中 */ 然后对group_detail内部的text设置： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 但是，由于group_detail是flex布局，内部元素是行内排列，所以我们可以将text的显示设置为块级元素，并设置溢出省略。 具体修改如下： 在group_detail的样式中添加： /* 如果group_detail还没有样式，可以这样定义 */ display: flex; align-items: center; margin-right: 10rpx; /* 可选，增加一些间距 */ max-width: 200rpx; /* 根据需求调整 */ flex-shrink: 0; /* 不压缩 */ 然后在group_detail内部的text添加一个class，比如class="text-ellipsis"，并设置： .text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 或者，如果不想额外加class，可以直接在text上写样式，但小程序中可能不支持，所以建议加class。 修改后的代码： 注意：由于用户代码是vue模板，我们直接在style中定义，然后给text添加class。 但是，由于用户没有提供完整的样式，我假设在style部分定义.text-ellipsis。 另外，考虑到group_detail内部有image和text，我们也可以将group_detail设置为： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 但是这样设置，image和text都会在一行，并且如果整体超出最大宽度，就会显示省略号，但image也会被隐藏。所以我们需要分别设置image和text，让image正常显示，text超出省略。 因此，更合理的做法是： group_detail { display: flex; align-items: center; flex-shrink: 0; max-width: 200rpx; /* 或者用百分比，比如30% */ } group_detail image { flex-shrink: 0; } group_detail text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 这样，text会自适应宽度，超出则省略。 但是，由于每个group_detail的max-width限制了整个容器的最大宽度，所以text的宽度就是max-width减去image的宽度。 修改后的代码片段如下：</think>要解决`<text>`元素内容换行问题，需要调整Flex容器和子项的样式规则。以下是完整的修复方案： ```html <view style="display: flex; flex-wrap: nowrap; overflow-x: auto;"> <view class="group_detail" style="flex-shrink: 0; white-space: nowrap;"> <image style="width:34rpx;height: 34rpx; flex-shrink: 0;" src="@/static/My_icon/gw_person_count.png" mode=""></image> <text style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150rpx;">{{dictTypeChange(postTypeArr,item.postType)}}</text> </view> <view class="group_detail" style="flex-shrink: 0; white-space: nowrap;"> <image style="width:34rpx;height: 34rpx; flex-shrink: 0;" src="@/static/My_icon/gw_person_count.png" mode=""></image> <text style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150rpx;">{{item.employGap=='' || item.employGap==null ? '不限人数' : item.employGap + '人'}}</text> </view> <view class="group_detail" style="flex-shrink: 0; white-space: nowrap;"> <image style="width:34rpx;height: 34rpx; flex-shrink: 0;" src="@/static/My_icon/gw_idcard.png" mode=""></image> <text style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150rpx;">{{item.driveMode}}</text> </view> <view class="group_detail" style="flex-shrink: 0; white-space: nowrap;"> <image style="width:34rpx;height: 34rpx; flex-shrink: 0;" src="@/static/My_icon/gw_ph_type.png" mode=""></image> <text style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150rpx;">{{dictTypeChange(goodsTypeArr,item.goodsType)}}</text> </view> <view class="group_detail" style="flex-shrink: 0; white-space: nowrap;"> <image style="width:34rpx;height: 34rpx; flex-shrink: 0;" src="@/static/My_icon/gw_idcard.png" mode=""></image> <text style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150rpx;">{{item.driverAge}}岁</text> </view> </view> ``` ### 关键修复点说明： 1. **父容器设置**： ```css display: flex; flex-wrap: nowrap; /* 禁止子项换行 */ overflow-x: auto; /* 允许横向滚动 */ ``` 2. **子项容器设置**： ```css flex-shrink: 0; /* 禁止子项压缩 */ white-space: nowrap; /* 禁止内部文本换行 */ ``` 3. **文本元素设置**： ```css display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 超出显示省略号 */ max-width: 150rpx; /* 限制最大宽度 */ ``` 4. **图片元素设置**： ```css flex-shrink: 0; /* 禁止图片压缩 */ ``` ### 替代方案（使用CSS类）： ```html <style> .no-wrap-container { display: flex; flex-wrap: nowrap; overflow-x: auto; } .no-wrap-item { flex-shrink: 0; white-space: nowrap; } .no-wrap-text { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150rpx; } .no-shrink { flex-shrink: 0; } </style> <view class="no-wrap-container"> <view class="group_detail no-wrap-item"> <image class="no-shrink" style="width:34rpx;height:34rpx;" src="@/static/My_icon/gw_person_count.png"></image> <text class="no-wrap-text">{{dictTypeChange(postTypeArr,item.postType)}}</text> </view> <!-- 其他子项保持相同结构 --> </view> ``` ### 注意事项： 1. **响应式设计**： ```css /* 根据不同屏幕尺寸调整 */ @media (max-width: 600rpx) { .no-wrap-text { max-width: 100rpx; } } ``` 2. **动态内容处理**： 如果文本内容可能很长，考虑添加提示： ```html <text class="no-wrap-text" :title="item.driveMode">{{item.driveMode}}</text> ``` 3. **性能优化**： ```css will-change: transform; /* 优化滚动性能 */ -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */ ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值