Comments (3)
Hi @maximseshuk, I'm sorry to hear that you're having some problems. Can you please give me a bit more info on what is going wrong? Is there an error? Can you post a link to where the problem is happening?
from docsify-copy-code.
@jperasmus /cc @maximseshuk I'm also experiencing the same issue, when I add <script src="//unpkg.com/vue/dist/vue.min.js"></script>
to my index.html the copy-code-plugin stops working.
The .docsify-copy-code-button
is rendered but has opacity: 0; and does not respond to hover/click events.
I'm using
- Chrome 68
- docsify-cli version: 4.2.1
from docsify-copy-code.
I believe this issue is a result of loading two versions of Vue into the browser: one loaded by docsify (accessible as window.__EXECUTE_RESULT__
), and the other loaded from the <script>
tag added to the page.
What appears to be happening is that the second instance of Vue causes the content to render a second time. This produces all kinds of side effects, but the two that impact this plugin are as follows:
- Event handlers attached to elements in the content area are destroyed. This plugin attaches event handlers to each "Copy Code" button, so clicking these buttons after the second render occurs will have no effect.
- Vue-specific data attributes are modified. For example, the second render causes the
v-pre
attribute to be removed from<pre>
tags. This attribute is used as a CSS hook for displaying the button on hover, so after the second render buttons don't appear on hover.
I've updated the plugin to work around these issues and will make it available via a PR shortly. That said, if loading Vue via a <script>
tag within a docsify site is something folks want to do, then this is an issue that needs to be resolved by docsify. Until then, don't be surprised if you run into similarly odd behavior from other plugins (and possibly docsify itself) after loading Vue via a <script>
tag in your docsify site.
from docsify-copy-code.
Related Issues (15)
- Broken in IE10/11 HOT 1
- 404 error script with unpkg HOT 3
- how about i18n support? HOT 5
- The copyed content ends with a newline HOT 2
- 弄上去cdn啊,很慢,加载不出来 HOT 1
- Are there any other cdn sources? HOT 1
- I cannot install the copy code plugin for docsify HOT 3
- some effect on my Horizontal scroll bar HOT 4
- Deprecation warning in Chrome
- Consider building an optimized bundle
- Upon invoking "Copy to Clipboard" button, the Screen reader is not announcing the success message "Copied". HOT 7
- 2.0.1 is giving error on my website now HOT 20
- Release v3.0.0? HOT 3
- Proper keyboard focus boundary is not visible on the ‘Copy to clipboard’ button. HOT 2
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 docsify-copy-code.