Comments (7)
surmon-china
commented on August 15, 2024
http://www.swiper.com.cn/api/pagination/2014/1217/68.html
可以参考官方的自定义分页器api，或者使用css来控制颜色，能实现你的需求；
组件应该尽量避免与官方api的差异，感谢反馈。
from vue-awesome-swiper.
immake
commented on August 15, 2024
可能是我没有描述清楚，我的组件是独立的，style 添加了scoped， 官方没有提供修改分页图标颜色的API，采用样式覆盖在scoped下行不通。感谢回复。在 2016年12月25日，22:46，Surmon <[email protected]> 写道：http://www.swiper.com.cn/api/pagination/2014/1217/68.html可以参考官方的自定义分页器api，或者使用css来控制颜色，能实现你的需求；
组件应该尽量避免与官方api的差异，感谢反馈。—You are receiving this because you authored the thread.Reply to this email directly, view it on GitHub, or mute the thread.
{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/surmon-china/vue-awesome-swiper","title":"surmon-china/vue-awesome-swiper","subtitle":"GitHub repository","main_image_url":"<a href="<a href="<a href="<a href="https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png" class="">https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png</a>" class=""><a href="https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png" class="">https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png</a></a>" class=""><a href="<a href="https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png" class="">https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png</a>" class=""><a href="https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png</a>" class="">https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png</a></a></a>" class=""><a href="<a href="<a href="https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png" class="">https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png</a>" class=""><a href="https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png" class="">https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png</a></a>" class=""><a href="<a href="https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png&lt;/a&gt" class="">https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png&lt;/a&gt</a>;" class=""><a href="https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png&lt;/a&gt" class="">https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png&lt;/a&gt</a>;</a></a>","avatar_image_url":"<a href="<a href="<a href="<a href="https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png" class="">https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png</a>" class=""><a href="https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png" class="">https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png</a></a>" class=""><a href="<a href="https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png" class="">https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png</a>" class=""><a href="https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png</a>" class="">https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png</a></a></a>" class=""><a href="<a href="<a href="https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png" class="">https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png</a>" class=""><a href="https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png" class="">https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png</a></a>" class=""><a href="<a href="https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png&lt;/a&gt" class="">https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png&lt;/a&gt</a>;" class=""><a href="https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png&lt;/a&gt" class="">https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png&lt;/a&gt</a>;</a></a>","action":{"name":"Open in GitHub","url":"<a href="<a href="<a href="<a href="https://github.com/surmon-china/vue-awesome-swiper" class="">https://github.com/surmon-china/vue-awesome-swiper</a>" class=""><a href="https://github.com/surmon-china/vue-awesome-swiper" class="">https://github.com/surmon-china/vue-awesome-swiper</a></a>" class=""><a href="<a href="https://github.com/surmon-china/vue-awesome-swiper" class="">https://github.com/surmon-china/vue-awesome-swiper</a>" class=""><a href="https://github.com/surmon-china/vue-awesome-swiper</a>" class="">https://github.com/surmon-china/vue-awesome-swiper</a></a></a>" class=""><a href="<a href="<a href="https://github.com/surmon-china/vue-awesome-swiper" class="">https://github.com/surmon-china/vue-awesome-swiper</a>" class=""><a href="https://github.com/surmon-china/vue-awesome-swiper" class="">https://github.com/surmon-china/vue-awesome-swiper</a></a>" class=""><a href="<a href="https://github.com/surmon-china/vue-awesome-swiper" class="">https://github.com/surmon-china/vue-awesome-swiper</a>" class=""><a href="https://github.com/surmon-china/vue-awesome-swiper" class="">https://github.com/surmon-china/vue-awesome-swiper</a></a></a></a>"}},"updates":{"snippets":[{"icon":"PERSON","message":"@surmon-china in #23: [<a href="<a href="<a href="<a href="http://www.swiper.com.cn/api/pagination/2014/1217/68.html" class="">http://www.swiper.com.cn/api/pagination/2014/1217/68.html</a>" class=""><a href="http://www.swiper.com.cn/api/pagination/2014/1217/68.html" class="">http://www.swiper.com.cn/api/pagination/2014/1217/68.html</a></a>" class=""><a href="<a href="http://www.swiper.com.cn/api/pagination/2014/1217/68.html" class="">http://www.swiper.com.cn/api/pagination/2014/1217/68.html</a>" class=""><a href="http://www.swiper.com.cn/api/pagination/2014/1217/68.html</a>" class="">http://www.swiper.com.cn/api/pagination/2014/1217/68.html</a></a></a>" class=""><a href="<a href="<a href="http://www.swiper.com.cn/api/pagination/2014/1217/68.html" class="">http://www.swiper.com.cn/api/pagination/2014/1217/68.html</a>" class=""><a href="http://www.swiper.com.cn/api/pagination/2014/1217/68.html" class="">http://www.swiper.com.cn/api/pagination/2014/1217/68.html</a></a>" class=""><a href="<a href="http://www.swiper.com.cn/api/pagination/2014/1217/68.html&lt;/a&gt" class="">http://www.swiper.com.cn/api/pagination/2014/1217/68.html&lt;/a&gt</a>;" class=""><a href="http://www.swiper.com.cn/api/pagination/2014/1217/68.html&lt;/a&gt" class="">http://www.swiper.com.cn/api/pagination/2014/1217/68.html&lt;/a&gt</a>;</a></a>](url)\r\n\r\n可以参考官方的自定义分页器api，或者使用css来控制颜色，能实现你的需求；\r\n组件应该尽量避免与官方api的差异，感谢反馈。"}],"action":{"name":"View Issue","url":"<a href="<a href="<a href="<a href="#23 (comment)" class="">#23 (comment)</a>" class=""><a href="#23 (comment)" class="">#23 (comment)</a></a>" class=""><a href="<a href="#23 (comment)" class="">#23 (comment)</a>" class=""><a href="#23 (comment)</a>" class="">#23 (comment)</a></a></a>" class=""><a href="<a href="<a href="#23 (comment)" class="">#23 (comment)</a>" class=""><a href="#23 (comment)" class="">#23 (comment)</a></a>" class=""><a href="<a href="#23 (comment)" class="">#23 (comment)</a>" class=""><a href="#23 (comment)" class="">#23 (comment)</a></a></a></a>"}}}
![https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png&lt;/a&gt</a>;</a></a>","avatar_image_url":"<a](https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png&lt;/a&gt</a>;</a></a>","avatar_image_url":"<a){kind=link}
![https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png&lt;/a&gt</a>;</a></a>","action":{"name":"Open](https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png&lt;/a&gt</a>;</a></a>","action":{"name":"Open){kind=link}
from vue-awesome-swiper.
surmon-china
commented on August 15, 2024
是的，因为使用scoped标签，生成的css将包含一个随机标签（属性选择器）来标记作用范围，并且子组件不会作为所在宿主组件的元素包含在范围内，所以它不会应用，这是vue的实现机制导致的，目前vue组件的模板里还没有可选的类似ng2的多种样式应用机制，所以目前可以用
- 需要应用pagination样式的组件，不使用scoped标签
- 将pagination样式定义在全局公共的css中
但是组件本身应该是不会有大的和官方差异较大的改动了，
如果后续有更好的方法，我会在此留言。
from vue-awesome-swiper.
immake
commented on August 15, 2024
非常感谢Surmon。
… 在 2016年12月26日，09:27，Surmon ***@***.***> 写道：
是的，因为使用scoped标签，生成的css将包含一个随机标签（属性选择器）来标记作用范围，并且子组件不会作为所在宿主组件的元素包含在范围内，所以它不会应用，这是vue的实现机制导致的，目前vue组件的模板里还没有可选的类似ng2的多种样式应用机制，所以目前可以用
需要应用pagination样式的组件，不适用scoped标签
将pagination样式定义在全局公公的css中
但是组件本身应该是不会有大的和官方差异较大的改动了，
如果后续有更好的方法，我会在此留言。
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#23 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJwWVRkBQAdU1W-GC-r9Snjn7LeBh1sHks5rLxgMgaJpZM4LUrmY>.
from vue-awesome-swiper.
qinouz
commented on August 15, 2024
终于 解决了 我都想去 css改源码了
from vue-awesome-swiper.
unixc3t
commented on August 15, 2024
使用scoped时 可以使用>>> 穿透语法
https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html
深度作用选择器那一节
from vue-awesome-swiper.
wildescarrot
commented on August 15, 2024
可以把style的scoped去掉哦
from vue-awesome-swiper.
Related Issues (20)
- Swiper does not re-render when the swiperOptions state change on IOS app
- The misuse of path of swiper.css causes the dependency was not found HOT 1
- swiper-pagination not show HOT 1
- loop+slidesPerView
- when slidesPerView is auto，use virtual errors HOT 1
- Can't resolve 'swiper/swiper-bundle.css'
- Nuxt 3 Support HOT 2
- Local Registration failed while global Registration succeeded
- Is swiper 7 currently supported ? HOT 2
- How to use stopOnLastSlide property?
- vue 2 swiper7 vue-awesome-swiper effect没有效果
- swiper7 allowSlideNext unable???
- How to modify the default value HOT 1
- Is vue3.0 supported? HOT 3
- cube effect ios is not click
- 更 HOT 1
- Vue-awesome-swiper on the Macbook, Monterey 12.2.1, M1 HOT 1
- To make it more accessible we should have the option to use ul and li as the tags for the slider and the slider items HOT 1
- Can't install vue-awesome-swiper 4.1.1 HOT 1
- IOS下轮播图在返回滑动的时候，图片显示当前激活图片但是随后又会跳转到上一张
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-awesome-swiper.